<template>
	<view class="pages">
		<view class="login-content-top">
			<view class="box-content  user-infos">
				<view class="fixed-right">
					<!-- <image class="icon-img" :src="$util.imgurl('/imgs/mine/mine-message.png')" mode=""
						@click="handleToPath(2)" v-if="is_login"></image> -->
					<image class="icon-img" :src="$util.imgurl('/imgs/mine/set-icon.png')" mode=""
						@click="handleToPath(3)" v-if="is_login"></image>
					<view class="jishi-bg" v-if="userInfo.is_service == 1" @click="handleToPath(1)">
						技师
					</view>
				</view>
				<view class="user-info">
					<view class="header-content">
						<image class="user-header" :src="userInfo.avatar?userInfo.avatar:$util.baseheader"
							@click="$util.toUrl('/otherpages/setting/center')" mode="aspectFill"></image>
						<image v-if="userInfo.is_vip" class="vip-icon"
							src="https://qiniu-cdn.maeiyun.com/imgs/mine/vip1.png" mode=""></image>
					</view>
					<view class="user-name" @click="$util.toUrl('/otherpages/setting/center')" v-if="is_login">
						<view class="hidden">{{userInfo.nickname}}</view>
						<view class="user-sign" v-if="userInfo.is_service">平台技师</view>
						<view class="user-sign" v-else>普通用户</view>
					</view>
					<view v-else @click="toLink('/pages/register/register')">点击登录</view>
				</view>
				<view class="vip-content" @click="toVip">
					<view class="vip-title">
						<view class="kaitong-text">{{userInfo.is_vip ? 'VIP用户' : '开通会员'}}</view>
						<view class="zhekou">终身使用 {{(Number(discount)*10)}}折</view>
					</view>
				</view>
			</view>
			<view class="box-content">

				<view class="chunk-content">
					<view class="chunk-title" @click="toLink('/otherpages/order/order?type=0')">
						<view>我的订单</view>
						<uni-icons type="forward" size="18" color="#333330"></uni-icons>
					</view>
					<view class="order-type">
						<view class="item-order" @click="toLink('/otherpages/order/order?type=1')">
							<uni-badge size="small" :text="userInfoAttion.no_pay" absolute="rightTop" type="error">
								<image style="width: 48rpx;" :src="$util.imgurl('/imgs/mine/order-1.png')" mode="">
								</image>
								<view class="order-title">待付款</view>
							</uni-badge>

						</view>
						<view class="item-order" @click="toLink('/otherpages/order/order?type=2')">
							<uni-badge size="small" :text="userInfoAttion.to_be_served" absolute="rightTop"
								type="error">
								<image style="width: 42rpx;" :src="$util.imgurl('/imgs/mine/order-2.png')" mode="">
								</image>
								<view class="order-title">待使用</view>
							</uni-badge>
						</view>
						<view class="item-order" @click="toLink('/otherpages/order/order?type=4')">
							<uni-badge size="small" :text="userInfoAttion.to_be_evaluated" absolute="rightTop"
								type="error">
								<image :src="$util.imgurl('/imgs/mine/order-3.png')" mode=""></image>
								<view class="order-title">待评价</view>
							</uni-badge>
						</view>
						<view class="item-order" @click="toLink('/otherpages/order/order?type=7')">
							<uni-badge size="small" :text="userInfoAttion.return_or_sfter" absolute="rightTop"
								type="error">
								<image style="width: 43rpx;" :src="$util.imgurl('/imgs/mine/order-4.png')" mode="">
								</image>
								<view class="order-title">退款</view>
							</uni-badge>
						</view>
					</view>

				</view>
				<view class="chunk-content">
					<view class="chunk-title">
						<view>我的工具</view>
						<!-- <uni-icons type="forward" size="18" color="#333330"></uni-icons> -->
					</view>
					<view class="instrument-type">
						<view class="instrument-item" @click="toLink('/otherpages/mine/voucher')">
							<image src="https://qiniu-cdn.maeiyun.com/imgs/mine/gong9.png" mode=""></image>
							<view class="instrument-item-title">领券/兑换</view>
						</view>
						<view class="instrument-item" @click="toLink('/otherpages/mine/invite2')">
							<image style="width: 43rpx;height: 40rpx;"
								src="https://qiniu-cdn.maeiyun.com/imgs/mine/gong1.png" mode=""></image>
							<view class="instrument-item-title">邀请好友</view>
						</view>
						<view class="instrument-item" @click="show = true">
							<image style="width: 40rpx;height: 40rpx;"
								src="https://qiniu-cdn.maeiyun.com/imgs/mine/gong2.png"></image>
							<view class="instrument-item-title">联系客服</view>
						</view>
						<view class="instrument-item" @click="toLink('/otherpages/setting/complaint/complaint')">
							<image style="width: 40rpx;height: 40rpx;"
								src="https://qiniu-cdn.maeiyun.com/imgs/mine/gpng3.png" mode=""></image>
							<view class="instrument-item-title">投诉/售后</view>
						</view>
						<view class="instrument-item" @click="toLink('/otherpages/mine/eval')">
							<image style="width: 40rpx;height: 40rpx;"
								src="https://qiniu-cdn.maeiyun.com/imgs/mine/gong4.png" mode=""></image>
							<view class="instrument-item-title">我的评价</view>
						</view>
						<view class="instrument-item" @click="toComplanit">
							<image style="width: 40rpx;height: 40rpx;"
								src="https://qiniu-cdn.maeiyun.com/imgs/mine/gong6.png" mode=""></image>
							<view class="instrument-item-title">合作加盟</view>
						</view>
						<view class="instrument-item" @click="toLink('/otherpages/mine/apply')">
							<image style="width: 40rpx;height: 40rpx;"
								src="https://qiniu-cdn.maeiyun.com/imgs/mine/gong8.png" mode=""></image>
							<view class="instrument-item-title">商家入驻</view>
						</view>
						<view class="instrument-item" @click="toLink('/otherpages/attention/attentionserver')">
							<image style="width: 40rpx;height: 40rpx;"
								src="https://qiniu-cdn.maeiyun.com/imgs/mine/gong5.png" mode=""></image>
							<view class="instrument-item-title">我的收藏</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-action-sheet :list="list" v-model="show" :cancel-btn="false" @click="onClickKefuMeun"
			:safe-area-inset-bottom="true"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				userInfoAttion: {},
				heights: 0,
				is_login: false,

				show: false,
				list: [{
					text: '拨打客服电话',
				}, {
					text: '添加客服微信',
				}],

				discount: 0,
			}
		},
		onLoad() {
			this.getVip()
		},
		onShow() {
			let token = uni.getStorageSync('token')
			if (token) {
				this.getUserAttionNums()
				this.getUserInfo()
			} else {
				this.userInfo = {}
				this.is_login = false
			}
		},
		onPageScroll(data) {

		},
		onReachBottom() {

		},
		methods: {
			getVip() {
				this.request.httpTokenRequest({
					url: "user/vipDetail",
					method: "post"
				}, {}).then(res => {
					if (res.code == 0) {
						this.discount = res.data.discount
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			toComplanit() {
				this.toLink('/otherpages/mine/joinUs')
			},
			login() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			getHeight() {
				var that = this
				const query = uni.createSelectorQuery().in(this);
				query.select('.pages').boundingClientRect(data => {
					that.heights = data.height
				}).exec();
			},
			massageResult(data) {
				// console.log(data)
			},
			attionNavto(type) {
				if (type == 0) {
					uni.navigateTo({
						url: '/otherpages/attention/mypush'
					})
				} else if (type == 1) {
					uni.navigateTo({
						url: '/otherpages/attention/attentiontechnician'
					})
				} else if (type == 2) {
					uni.navigateTo({
						url: '/otherpages/attention/attentionserver'
					})
				} else if (type == 3) {
					uni.navigateTo({
						url: '/otherpages/attention/attentiontravel'
					})
				}
			},

			getUserAttionNums() {
				// if (!this.is_login) {
				// 	return
				// }
				let that = this
				this.request.httpTokenRequest({
					url: "user/info",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						that.userInfoAttion = res.data
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			getUserInfo() {
				let that = this
				this.request.httpTokenRequest({
					url: "user/center",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						that.userInfo = res.data
						that.is_login = true
						uni.setStorageSync('user', that.userInfo)
					} else {
						this.$util.msg(res.msg)
						that.is_login = false
						return
					}
				}, error => {})
			},

			handleToPath(type) {
				let url = '';
				switch (type) {
					case 1:
						url = '/technician/index/index';
						uni.navigateTo({
							url: url
						})
						break;
					case 2:
						url = '/pages/message/message';
						uni.switchTab({
							url: url
						})
						break;
					case 3:
						url = '/otherpages/setting/setting';
						uni.navigateTo({
							url: url
						})
						break;
				}

			},

			toLink(e) {
				uni.navigateTo({
					url: e
				})
			},
			onClickKefuMeun(e) {
				if (e == 0) {
					this.request.httpTokenRequest({
						url: "index/getConfig",
						method: "get"
					}, {
						type: 'website',
						key: 'kefu_mobile'
					}).then(res => {
						if (res.code == 0) {
							this.$util.makeCall(res.data.value)
						} else {
							this.$util.msg(res.msg)
							return
						}
					}, error => {})
				}
				if (e == 1) {
					let sweixin = null
					plus.share.getServices(res => {
						sweixin = res.find(i => i.id === 'weixin')
						if (sweixin) {
							sweixin.openCustomerServiceChat({
								corpid: 'ww0191f0b4c298e9a8', //企业id
								url: 'https://work.weixin.qq.com/kfid/kfc3c0b425cca57235c' //客服地址链接
							})
						} else {
							uni.showToast({
								title: "当前环境不支持微信操作",
								icon: 'none'
							})
						}
					}, function() {
						uni.showToast({
							title: "获取服务失败，不支持该操作。" + JSON.stringify(e),
							icon: 'none'
						})
					})
				}
			},
			toVip() {
				let that = this
				this.request.httpTokenRequest({
					url: "user/center",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						this.toLink('/otherpages/vip/vip')
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},


			// 拉起企业微信客服
			toWechat() {
				let sweixin = null
				plus.share.getServices(res => {
					sweixin = res.find(i => i.id === 'weixin')
					if (sweixin) {
						// 获取corpid 地址 https://developer.work.weixin.qq.com/document/path/91507
						sweixin.openCustomerServiceChat({
							corpid: 'xxx',
							url: 'https://xxx'
						})
					} else {
						this.$util.msg('当前环境不支持微信操作')
					}
				}, function() {
					uni.showToast({
						title: "获取服务失败，不支持该操作。" + JSON.stringify(e),
						icon: 'error'
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.pages {
		padding-bottom: 160rpx;
	}

	.login-content-top {
		background: url('https://qiniu-cdn.maeiyun.com/imgs/mine/mine-bg.png')no-repeat;
		background-size: 100% 100%;
		height: 451rpx;
		box-sizing: border-box;
	}

	.user-infos {
		position: relative;
		height: 100%;
		padding-top: var(--status-bar-height);
	}

	.fixed-right {
		position: absolute;
		background-size: 100%;
		width: 100%;
		right: 0;
		top: 0;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		padding: calc(var(--status-bar-height) + 20rpx) 20rpx 20rpx;
		z-index: 99;

		.jishi-bg {
			background: url('https://qiniu-cdn.maeiyun.com/imgs/mine/jishi-icon.png')no-repeat;
			background-size: 100% 100%;
			width: 120rpx;
			height: 44rpx;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #F14533;
			line-height: 44rpx;
			padding-left: 17rpx;
			box-sizing: border-box;
		}

		.icon-img {
			width: 40rpx;
			height: 40rpx;
			margin-left: 30rpx;
		}
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-top: 86rpx;
		position: relative;
		z-index: 10;

		.header-content {
			margin-right: 19rpx;
			position: relative;
		}

		.user-header {
			width: 118rpx;
			height: 118rpx;
			border-radius: 50%;
			position: relative;
			overflow: hidden;
			border: 6rpx solid #EED5A0;

		}

		.vip-icon {
			position: absolute;
			width: 108rpx;
			height: 47rpx;
			bottom: -10rpx;
			left: 5rpx;
		}

		.user-name {
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			max-width: 360rpx;

			.hidden {
				max-width: 100%;
			}

			.user-sign {
				padding: 4rpx 20rpx;
				border-radius: 50px;
				font-size: 20rpx;
				color: #FFFFFF;
				background-color: #F97B78;
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}

	.vip-content {
		background: url('https://qiniu-cdn.maeiyun.com/imgs/mine/vip.png')no-repeat;
		background-size: 100% 100%;
		height: 235rpx;
		position: absolute;
		bottom: 3rpx;
		left: 30rpx;
		right: 30rpx;

		.vip-title {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 30rpx;
			left: 67rpx;

			.kaitong-text {
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #89471B;
				margin-right: 15rpx;
			}

			.zhekou {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #89471B;
			}
		}
	}

	.chunk-content {
		background-color: #FFFFFF;
		padding: 0 30rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;

		// padding-bottom: 120rpx;
		.user-push-info {
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;
			padding: 24rpx 0;

			.push-nums {
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.push-title {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #88898A;
			}
		}

		.chunk-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #D5D5D5;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			// font-weight: 600;
			color: #333333;
			height: 104rpx;
			line-height: 104rpx;
		}

		.order-type {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx 0;

			.item-order {
				text-align: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.order-title {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.instrument-type {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 30rpx 0 0 0;

			.instrument-item {
				width: 25%;
				text-align: center;
				margin-bottom: 30rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.instrument-item-title {
					font-size: 26rpx;
					font-weight: 400;
					color: #333333;
					line-height: 37rpx;
					margin-top: 10rpx;
				}
			}

		}

	}
</style>